document.addEventListener("DOMContentLoaded", function() {
    const ul = document.querySelector("#carousel ul");
    const leftArrow = document.getElementById("leftArrow");
    const rightArrow = document.getElementById("rightArrow");

    // 获取轮播图项数量
    const slides = document.querySelectorAll("#carousel ul li");
    const totalSlides = slides.length;

    // 当前显示的图片索引
    let currentIndex = 0;
    let autoSlideInterval;  // 定时器变量，用于自动轮播

    // 显示下一张图片
    function goToNextSlide() {
        currentIndex = (currentIndex + 1) % totalSlides; // 循环到第一张
        updateCarousel();
    }

    // 显示上一张图片
    function goToPreviousSlide() {
        currentIndex = (currentIndex - 1 + totalSlides) % totalSlides; // 循环到最后一张
        updateCarousel();
    }

    // 更新轮播图位置
    function updateCarousel() {
        const offset = -currentIndex * 1950; // 每次滑动的距离
        ul.style.transform = `translateX(${offset}px)`; // 通过CSS transform实现平滑滑动
    }

    // 自动轮播，每3秒自动切换一次
    function startAutoSlide() {
        autoSlideInterval = setInterval(goToNextSlide, 6000); // 每3秒切换一次
    }

    // 停止自动轮播
    function stopAutoSlide() {
        clearInterval(autoSlideInterval);  // 清除定时器
    }

    // 手动切换时重启自动轮播
    function restartAutoSlide() {
        stopAutoSlide(); // 先停止当前的定时器
        startAutoSlide(); // 再重新开始定时器
    }

    // 点击右箭头切换到下一张
    rightArrow.addEventListener("click", function() {
        goToNextSlide();
        restartAutoSlide();  // 手动切换后重启自动轮播
    });

    // 点击左箭头切换到上一张
    leftArrow.addEventListener("click", function() {
        goToPreviousSlide();
        restartAutoSlide();  // 手动切换后重启自动轮播
    });

    // 初始化自动轮播
    startAutoSlide();
});
